<template>
  <div>
      <div class="search">
        <div>
          <i class="fa fa-search" style="margin-left:10px;"></i>
          <!-- 按下回车键进行搜索 -->
          <input type="text" placeholder="请输入电影名称进行搜索" @keydown='search' v-model="filmName">
        </div>
      </div>
      <div class="show">
        <div class="filmName">
          <p>电影/电视剧/综艺</p>
        </div>
        <!-- ------------------------------------------- -->
        <div class="filmInfo" v-for='item in searchFilm' :key="item.index">
          <table>
            <tr>
              <td rowspan="4">
                <img :src="item.src">
              </td>
              <td>
                  <p>{{item.filmName}}<span>{{item.filmScore}}</span></p>
                  <p>剧情，喜剧，犯罪</p>
                  <p>2020-6-30</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'search-film',
    data(){
      return{
        filmImformation:[],
        // 这个数组用来保存过滤后的数据
        searchFilm:[],
        filmName:'',
        isShow:true
      }
    },
    methods:{
      search(){
        this.$ajax.get("/mock/allFilmInfo.json")
        .then(response => {
          if(response.status == 200){
            if(response.data && response.data.allFilmInfo){
              // 将从mock中请求的所有数据存放到filmImformation数组当中
              this.filmImformation = response.data.allFilmInfo
            }
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    },
    watch:{
      // 监听filmName
      filmName:{
        handler(val){
          // 使用filter过滤器
          this.searchFilm = this.filmImformation.filter((item) => {
            return item.filmName.indexOf(val) !== -1
          })
        }
      }
    }
}
</script>

<style scoped>
/* 设置搜索框的样式 */
.search{
  width:100%;
  height:50px;
  background: rgba(240, 240, 190,0.5);
  border:1px solid rgba(32, 32, 32,0);
}
.search div{
  background:#fff;
  width:96%;
  height:30px;
  margin:10px auto;
  line-height:30px;
}
.search div input{
  border:0;
  margin-left:10px;
  width:90%;
  height:100%;
  outline:none;
}
/* 设置搜索展示的样式 */
.show,.filmInfo table{
  width:100%;
}
.show{
  border-bottom:1px dashed gray;
}
.show .filmName{
  height:50px;
  line-height:50px;
  border-bottom:1px solid rgba(146, 145, 145,0.3);
  color:gray;
  font-weight:bold;
}
.show .filmName p{
  margin-left:10px;
}

/* 设置电影信息样式 */
.filmInfo{
  margin:10px 10px 10px 20px;
}
.filmInfo table tr td img{
  width:100px;
}
.filmInfo table tr td:nth-of-type(1){
  width:100px;
}
.filmInfo table tr td:nth-of-type(2){
  display:flex;
  flex-direction: column;
  margin-left:10px;
}
.filmInfo table tr td:nth-of-type(2) p:nth-of-type(1){
  font-size:22px;
  font-weight:bold;
  position:relative;
}
.filmInfo table tr td:nth-of-type(2) p:nth-of-type(1) span{
  font-size:normal;
  color:#f90;
  display:inline-block;
  position:absolute;
  right:0;
  top:0;
}
.filmInfo table tr td:nth-of-type(2) p:nth-of-type(2){
  margin:10px 0 10px 0;
}
</style>